<template>
	<view>
		<!-- 导航栏区域 -->
		<u-navbar autoBack left-icon="" placeholder>
			<!-- 左边返回区域 -->
			<view class="nav-back" slot="left">
				<u-icon name="arrow-left" size="40"></u-icon>
			</view>
			<!-- 搜索区域 -->
			<view class="nav-search" slot="center">
				<u-search placeholder=" 搜索目的地/景点" borderColor="#3478F6" bgColor="#FFFFFF" height="60rpx"
					searchIconSize="40" searchIconColor="#666666" :show-action="false"></u-search>
			</view>
		</u-navbar>

		<view class="nav-tab">
			<u-tabs :list="list1" @click="" lineColor="#3478F6" :activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.05)',
				}" lineWidth="50rpx" lineHeight="8rpx"></u-tabs>
		</view>
		<!-- 主区域 -->
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="{
								page: { size: 6 }, // 初始分页大小
								textNoMore: '-- 没有更多内容 --' 
			}" class="main-content">
			<view class="main-card">
				<u-grid col="2" @click="">
					<u-grid-item style="width: 35%; padding-top:23rpx;">
						<u-image src="@/static/content1.jpg" duration="500" radius="20rpx" height="200"
							width="200"></u-image>
					</u-grid-item>
					<u-grid-item style="padding-top:10px;align-items:flex-start; gap:20rpx">
						<view class="title">
							故宫博物馆
						</view>
						<view class="grade">
							5A
						</view>
						<u-row>
							<u-rate v-model="value" size="30rpx"></u-rate>
							<view class="description-population">17532评价</view>
						</u-row>

						<view class="description-address" style="top: 10rpx;">北京市东城区景山前街4号</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="list-card">
				<!-- 列表区域 -->
				<view class="section-header">
					<u-tabs :list="options" @click="" :scrollable="false" lineWidth="0rpx" :activeStyle="{
            color: '#3478F6',
            transform: 'scale(1.05)'
        }"></u-tabs>
				</view>
				<!-- 卡片区域 -->
				<view class="content-list">
					<content-card v-for="item in contentList" :key="item.homeId" :item="item" />
				</view>
			</view>

		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		contentListByPage
	} from "@/api/system/homestay.js";
	export default {
		mixins: [MescrollMixin], // 使用mixins
		data() {
			return {
				list1: [{
					name: '综合',
				}, {
					name: '游记',
				}, {
					name: '景点'
				}],
				value: 3,
				contentList: {},
				options: [{
					name: '智能排序',
				}, {
					name: '最新发布',
				}, {
					name: '最靠近景点'
				}],
				loading: true,
			}
		},
		methods: {
			upCallback(page) {
				const pageSize = 6

				//设置延迟
				setTimeout(() => {
					contentListByPage(page.num, pageSize).then(res => {
						// 使用正确的响应字段
						const currentList = res.rows || []
						const totalCount = res.total || 0

						// 处理图片路径和标签
						const processedList = currentList.map(item => {
							return {
								...item,
								coverImage: "http://localhost:8080" + item.coverImage,
								tags: this.formatTags(item.tags)
							}
						})

						// 设置列表数据
						if (page.num === 1) {
							this.contentList = processedList
							this.bannerList = processedList.slice(0, 3) // 轮播图取前3条
						} else {
							this.contentList = [...this.contentList, ...processedList]
						}

						// 使用正确的字段结束加载
						this.mescroll.endBySize(currentList.length, totalCount)
						console.log(currentList[0].coverImage)
					}).catch(() => {
						this.mescroll.endErr()
					});
				}, 1000);

			},
			// 添加标签格式化方法
			formatTags(tags) {
				if (typeof tags === "string") {
					try {
						const arr = JSON.parse(tags)
						return Array.isArray(arr) ?
							arr.map(tag => String(tag).replace(/^[\[\s'"]+|[\]\s'"]+$/g, "")) :
							tags.split(",").map(tag => tag.trim())
					} catch {
						return tags.split(",").map(tag => tag.trim())
					}
				}
				return tags
			}
		}
	}
</script>

<style scoped>
	.nav-back {
		margin-left: -10rpx;
	}

	.nav-search {
		width: 85%;
	}

	::v-deep .u-search__content {
		border-width: 4rpx !important;
	}

	.nav-tab {
		height: 85rpx;
		width: 100%;
		background-color: white;
		position: fixed;
		z-index: 15;
	}

	/* 解决滑块不居中的问题 */
	/deep/ .u-tabs__wrapper__nav__item {
		padding: 10rpx 40rpx;
	}

	/* 主区域 */
	.main-content {
		margin-top: 85rpx;
		background-color: #F7F7F7;
	}

	/* 卡片 */
	.main-card {
		height: 15vh;
		background-color: white;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.title {
		font-size: 30rpx;
	}

	.grade {
		background-color: #F2F2F2;
		color: #666666;
		width: 50rpx;
		height: 35rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 20rpx;
		line-height: 35rpx;
	}

	.description-population {
		font-size: 20rpx;
		color: #A6A6A6;
	}

	.description-address {
		font-size: 30rpx;
		color: #A6A6A6;
		line-height: 20px;
	}

	.content-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24rpx;
		margin: 0 30rpx;
	}
</style>